<template>
  <div class="Document_sharing">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px':'top: 100px;padding:10px'"
        >
          <div>
            <el-input
              placeholder="请输入内容"
              v-model="search_val"
              class="input-with-select"
              style="width:25%;"
            >
              <el-select
                filterable
                v-model="select_typ"
                slot="prepend"
                placeholder="请选择"
              >
                <el-option
                  label="全部"
                  :value="0"
                ></el-option>
                <el-option
                  label="患者姓名"
                  :value="1"
                ></el-option>
                <el-option
                  label="患者表示号"
                  :value="2"
                ></el-option>
                <el-option
                  label="证件号"
                  :value="3"
                ></el-option>
              </el-select>
            </el-input>
            <el-date-picker
              v-model="search_time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="margin-left:20px"
            >
            </el-date-picker>
            <el-button
              size="small"
              type="primary"
              style="margin-left:15px"
              @click="page.page=1,get_tableData()"
            >搜索</el-button>
            <el-button size="small">重置</el-button>

            <el-button
              type="text"
              icon="el-icon-setting"
              style="float:right;color:#000;font-size:18px;padding:0"
            ></el-button>
            <el-switch
              v-model="switch_yinsi"
              active-color="#13ce66"
              inactive-color="#ff4949"
              style="float:right;margin-right:15px"
            >
            </el-switch>
            <span style="float:right;margin-right:15px">隐私保护：</span>

          </div>
          <!-- 表格 -->
          <div style="margin-top:20px">
            <el-table
              ref="multipleTable"
              :data="newList"
              tooltip-effect="dark"
              style="width: 100%;"
              @selection-change="handleSelectionChange"
              border
              height="550"
            >
              <el-table-column
                type="selection"
                width="55"
                fixed
              >
              </el-table-column>
              <el-table-column
                v-for="(i,index) in tableData_item_table"
                :key="i.flag"
                :label="i.label"
                :fixed="i.flag== 1||i.flag==2||i.flag==3"
                :prop="i.flag"
              >
              </el-table-column>
            </el-table>
            <div style="margin-top:15px;">
              <span>已选择 <span style="color:red">{{sum}}</span> </span>
              <div
                class="block"
                style="float:right"
              >
                <el-pagination
                  layout="prev, pager, next"
                  :total="page.total"
                  :page-size="page.limit"
                  @current-change="page_change"
                >
                </el-pagination>
              </div>
              <el-divider></el-divider>
            </div>
            <div>
              <span>总计：<span>{{sum}}</span>份 | 共生成0类文档 | 未生成57类文档</span>
            </div>
            <div style="text-align:center;margin-top:50px">
              <el-button
                size="small"
                :disabled="flag_list.length == 0 ? true : false"
                @click="open"
              >生成文档</el-button>
            </div>
          </div>
          <!-- 弹层 -->
          <el-dialog
            title="批量生成共享文档"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose"
            :append-to-body="true"
            :close-on-click-modal="false"
          >
            <el-form
              label-position="right"
              :model="formLabelAlign"
              label-width="90px"
            >
              <el-form-item
                label="版本号："
                style="width:100%;display:inline-block"
              >
                <template>
                  <el-select
                    v-model="formLabelAlign.type1"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      label="v1.0"
                      value="v1.0"
                    >
                    </el-option>
                    <el-option
                      label="v2.0"
                      value="v2.0"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-form-item>
              <el-form-item
                label="开始时间："
                style="width:50%;display:inline-block"
              >
                <el-date-picker
                  v-model="formLabelAlign.value1"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label="结束时间："
                style="width:50%;display:inline-block"
              >
                <el-date-picker
                  v-model="formLabelAlign.value2"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData_item"
                tooltip-effect="dark"
                style="width: 100%;"
                @selection-change="handleSelectionChange"
                height="300px"
              >
                <el-table-column
                  type="selection"
                  width="55"
                >
                </el-table-column>
                <el-table-column
                  label="文件类型"
                  prop="label"
                >
                </el-table-column>
              </el-table>
            </div>
            <span
              slot="footer"
              class="dialog-footer"
            >
              <el-button @click="handleClose">取 消</el-button>
              <el-button
                type="primary"
                @click="handleClose"
              >确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      search_val: '',
      select_typ: 0,
      search_time: [
        [''],
        ['']
      ],
      switch_yinsi: true,
      tableData: [
        { id: '320153956435000', name: '唐文静', idCard: '371***********7312', num: '0', num1: '2' },
        { id: '320156956482700', name: '李霞', idCard: '533***********1021', num: '1', num1: '5' },
        { id: '320156856481501', name: '李俊锋', idCard: '220***********4779', num: '1', num1: '3' },
        { id: '320072319880820', name: '丁曦阳', idCard: '230***********989X', num: '0', num1: '1' },
        { id: '320012419830167', name: '吴颖莹', idCard: '130***********502X', num: '2', num1: '4' },
        { id: '320021989051629', name: '吴雨霞', idCard: '331***********1803', num: '0', num1: '2' },
        { id: '320102198905162', name: '车佳佳', idCard: '340***********3572', num: '1', num1: '3' },
        { id: '320060219720825', name: '张殿国', idCard: '320***********6891', num: '2', num1: '5' },
        { id: '320882197209072', name: '李怀宝', idCard: '410***********9848', num: '1', num1: '0' },
        { id: '320124197307093', name: '张天政', idCard: '373***********6451', num: '3', num1: '4' },
        { id: '320185197609165', name: '叶常均', idCard: '320***********1880', num: '0', num1: '1' },
        { id: '320031984101025', name: '侯怡宁', idCard: '320***********7311', num: '2', num1: '3' },
        { id: '320403198812306', name: '祝镇凯', idCard: '321***********6147', num: '3', num1: '1', EMR01: '33' },
      ],
      tableData_text: [
        ['320153956435000', '唐文静1', '371***********7312', '11', '0'],
        ['320153956435000', '唐文静2', '371***********7312', '22', '0'],
        ['320153956435000', '唐文静5', '371***********7312', '33', '0'],
      ],
      flag_list: [],
      dialogVisible: false,
      formLabelAlign: {},
      tableData_item: [
        {
          label: '病历概要', flag: 'EMR01',
        },
        {
          label: '门(急)诊病历', flag: 'EMR02',
        },
        {
          label: '急诊留观病历', flag: 'EMR03',
        },
        {
          label: '西药处方', flag: 'EMR04',
        },
        {
          label: '中药处方', flag: 'EMR05',
        },
        {
          label: '检查报告', flag: 'EMR06',
        },
        {
          label: '检验报告', flag: 'EMR07',
        },
        {
          label: '治疗记录', flag: 'EMR08',
        },
        {
          label: '一般手术记录', flag: 'EMR09',
        },
        {
          label: '麻醉术前访视记录', flag: 'EMR10',
        },
        {
          label: '麻醉记录', flag: 'EMR11',
        },
        {
          label: '麻醉术后访视记录', flag: 'EMR12',
        },
        {
          label: '输血记录', flag: 'EMR13',
        },
        {
          label: '待产记录', flag: 'EMR14',
        },
        {
          label: '阴道分娩记录', flag: 'EMR15',
        },
        {
          label: '剖宫产记录', flag: 'EMR16',
        },
        {
          label: '一般护理记录', flag: 'EMR17',
        },
        {
          label: '病重（病危）护理记录', flag: 'EMR18',
        },
        {
          label: '手术护理记录', flag: 'EMR19',
        },
        {
          label: '生命体征测量记录', flag: 'EMR20',
        },
        {
          label: '出入量记录', flag: 'EMR21',
        },
        {
          label: '高值耗材使用记录', flag: 'EMR22',
        },
        {
          label: '入院评估', flag: 'EMR23',
        },
        {
          label: '护理计划', flag: 'EMR24',
        },
        {
          label: '出院评估与指导', flag: 'EMR25',
        },
        {
          label: '手术知情同意书', flag: 'EMR26',
        },
        {
          label: '麻醉知情同意书', flag: 'EMR27',
        },
        {
          label: '输血治疗同意书', flag: 'EMR28',
        },
        {
          label: '特殊检查及特殊治疗同意书', flag: 'EMR29',
        },
        {
          label: '病危（重）通知书', flag: 'EMR30',
        },
        {
          label: '其他知情同意书', flag: 'EMR31',
        },
        {
          label: '住院病案首页', flag: 'EMR32',
        },
        {
          label: '中医住院病案首页', flag: 'EMR33',
        },
        {
          label: '入院记录', flag: 'EMR34',
        },
        {
          label: '24小时内入出院记录', flag: 'EMR35',
        },
        {
          label: '24小时内入院死亡记录', flag: 'EMR36',
        },
        {
          label: '住院病程记录 首次病程记录', flag: 'EMR37',
        },
        {
          label: '住院病程记录 日常病程记录', flag: 'EMR38',
        },
        {
          label: '住院病程记录-上级医师查房记录', flag: 'EMR39',
        },
        {
          label: '住院病程记录-疑难病例讨论记录', flag: 'EMR40',
        },
        {
          label: '住院病程记录-交接班记录', flag: 'EMR41',
        },
        {
          label: '住院病程记录-转科记录', flag: 'EMR42',
        },
        {
          label: '住院病程记录-阶段小结', flag: 'EMR43',
        },
        {
          label: '住院病程记录-抢救记录', flag: 'EMR44',
        },
        {
          label: '住院病程记录-会诊记录', flag: 'EMR45',
        },
        {
          label: '住院病程记录-术前小结', flag: 'EMR46',
        },
        {
          label: '住院病程记录-术前讨论', flag: 'EMR47',
        },
        {
          label: '住院病程记录-术后首次病程记录', flag: 'EMR48',
        },
        {
          label: '住院病程记录-出院记录', flag: 'EMR49',
        },
        {
          label: '住院病程记录-死亡记录', flag: 'EMR50',
        },
        {
          label: '住院病程记录-死亡病例讨论记录', flag: 'EMR51',
        },
        {
          label: '住院医嘱', flag: 'EMR52',
        },
        {
          label: '出院小结', flag: 'EMR53',
        }
      ],
      tableData_item_table: [
        {
          label: '主索引号', flag: '1',
        },
        {
          label: '患者姓名', flag: '2',
        },
        {
          label: '证件号', flag: '3',
        },
        {
          label: '病历概要', flag: 'EMR01',
        },
        {
          label: '门(急)诊病历', flag: 'EMR02',
        },
        {
          label: '急诊留观病历', flag: 'EMR03',
        },
        {
          label: '西药处方', flag: 'EMR04',
        },
        {
          label: '中药处方', flag: 'EMR05',
        },
        {
          label: '检查报告', flag: 'EMR06',
        },
        {
          label: '检验报告', flag: 'EMR07',
        },
        {
          label: '治疗记录', flag: 'EMR08',
        },
        {
          label: '一般手术记录', flag: 'EMR09',
        },
        {
          label: '麻醉术前访视记录', flag: 'EMR10',
        },
        {
          label: '麻醉记录', flag: 'EMR11',
        },
        {
          label: '麻醉术后访视记录', flag: 'EMR12',
        },
        {
          label: '输血记录', flag: 'EMR13',
        },
        {
          label: '待产记录', flag: 'EMR14',
        },
        {
          label: '阴道分娩记录', flag: 'EMR15',
        },
        {
          label: '剖宫产记录', flag: 'EMR16',
        },
        {
          label: '一般护理记录', flag: 'EMR17',
        },
        {
          label: '病重（病危）护理记录', flag: 'EMR18',
        },
        {
          label: '手术护理记录', flag: 'EMR19',
        },
        {
          label: '生命体征测量记录', flag: 'EMR20',
        },
        {
          label: '出入量记录', flag: 'EMR21',
        },
        {
          label: '高值耗材使用记录', flag: 'EMR22',
        },
        {
          label: '入院评估', flag: 'EMR23',
        },
        {
          label: '护理计划', flag: 'EMR24',
        },
        {
          label: '出院评估与指导', flag: 'EMR25',
        },
        {
          label: '手术知情同意书', flag: 'EMR26',
        },
        {
          label: '麻醉知情同意书', flag: 'EMR27',
        },
        {
          label: '输血治疗同意书', flag: 'EMR28',
        },
        {
          label: '特殊检查及特殊治疗同意书', flag: 'EMR29',
        },
        {
          label: '病危（重）通知书', flag: 'EMR30',
        },
        {
          label: '其他知情同意书', flag: 'EMR31',
        },
        {
          label: '住院病案首页', flag: 'EMR32',
        },
        {
          label: '中医住院病案首页', flag: 'EMR33',
        },
        {
          label: '入院记录', flag: 'EMR34',
        },
        {
          label: '24小时内入出院记录', flag: 'EMR35',
        },
        {
          label: '24小时内入院死亡记录', flag: 'EMR36',
        },
        {
          label: '首次病程记录', flag: 'EMR37',
        },
        {
          label: '日常病程记录', flag: 'EMR38',
        },
        {
          label: '上级医师查房记录', flag: 'EMR39',
        },
        {
          label: '疑难病例讨论记录', flag: 'EMR40',
        },
        {
          label: '交接班记录', flag: 'EMR41',
        },
        {
          label: '转科记录', flag: 'EMR42',
        },
        {
          label: '阶段小结', flag: 'EMR43',
        },
        {
          label: '抢救记录', flag: 'EMR44',
        },
        {
          label: '会诊记录', flag: 'EMR45',
        },
        {
          label: '术前小结', flag: 'EMR46',
        },
        {
          label: '术前讨论', flag: 'EMR47',
        },
        {
          label: '术后首次病程记录', flag: 'EMR48',
        },
        {
          label: '出院记录', flag: 'EMR49',
        },
        {
          label: '死亡记录', flag: 'EMR50',
        },
        {
          label: '死亡病例讨论记录', flag: 'EMR51',
        },
        {
          label: '住院医嘱', flag: 'EMR52',
        },
        {
          label: '出院小结', flag: 'EMR53',
        }
      ],
      newList: [],
      sum: 0,
      page: {
        page: 1,
        limit: 10,
        total: 1
      }
    };
  },
  methods: {
    handleSelectionChange (val) {
      this.flag_list = val
      console.log(this.flag_list);
      this.sum = val.length
    },
    open () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
      this.formLabelAlign = {}
    },
    setList () {
      var li = this.tableData_text
      let res_li = [];
      for (var i in li) {
        res_li.push({
          '1': li[i][0],
          '2': li[i][1],
          '3': li[i][2],
          'EMR01': li[i][3],
          'EMR02': li[i][4],
          'EMR03': li[i][5],
          'EMR04': li[i][6],
          'EMR05': li[i][7],
          'EMR06': li[i][8],
          'EMR07': li[i][9],
          'EMR08': li[i][10],
          'EMR09': li[i][11],
          'EMR10': li[i][12],
          'EMR11': li[i][13],
          'EMR12': li[i][14],
          'EMR13': li[i][15],
          'EMR14': li[i][16],
          'EMR15': li[i][17],
          'EMR16': li[i][18],
          'EMR17': li[i][19],
          'EMR18': li[i][20],
          'EMR19': li[i][21],
          'EMR20': li[i][22],
          'EMR21': li[i][23],
          'EMR22': li[i][24],
          'EMR23': li[i][25],
          'EMR24': li[i][26],
          'EMR25': li[i][27],
          'EMR26': li[i][28],
          'EMR27': li[i][29],
          'EMR28': li[i][30],
          'EMR29': li[i][31],
          'EMR30': li[i][32],
          'EMR31': li[i][33],
          'EMR32': li[i][34],
          'EMR33': li[i][35],
          'EMR34': li[i][36],
          'EMR35': li[i][37],
          'EMR36': li[i][38],
          'EMR37': li[i][39],
          'EMR38': li[i][40],
          'EMR39': li[i][41],
          'EMR40': li[i][42],
          'EMR41': li[i][43],
          'EMR42': li[i][44],
          'EMR43': li[i][45],
          'EMR44': li[i][46],
          'EMR45': li[i][47],
          'EMR46': li[i][48],
          'EMR47': li[i][49],
          'EMR48': li[i][50],
          'EMR49': li[i][51],
          'EMR50': li[i][52],
          'EMR51': li[i][53],
          'EMR52': li[i][54],
          'EMR53': li[i][55],
        })
      }

      console.log(res_li);
      this.newList = res_li
    },
    dateFormat (val) { // 时间处理
      if (val == null || val == '') {
        return ''
      } else {
        let d = new Date(val) // val 为表格内取到的后台时间
        let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
        let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
        let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
        let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
        let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
        let times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec
        return times
      }
    },
    get_tableData () { // 获取表格数据
      this.search_time[0] = this.dateFormat(this.search_time[0])
      this.search_time[1] = this.dateFormat(this.search_time[1])
      this.$post("/DocumentManage/Shared/List?type=" + this.select_typ + "&keyword=" + this.search_val + "&startTime=" + this.search_time[0] + "&endTime=" + this.search_time[1] + "&page=" + this.page.page + "&limit=" + this.page.limit).then(res => {
        if (res.code == 0) {
          console.log(res);
          this.page.total = res.data.TotalCount
          this.tableData_text = res.data.list
          this.setList()
        }
      })
    },
    page_change (val) {// 页码切换
      this.page.page = val
      this.get_tableData()
    }
  },
  mounted () {
    // document.getElementById("2").focus();
    // console.log(this.tableData_text[1][1]);
    this.get_tableData()
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
  }
};
</script>
<style lang="scss">
.Document_sharing {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-date-editor .el-range-separator {
    padding: 0;
  }
  ::-webkit-scrollbar {
    /*滚动条整体样式*/

    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/

    height: 10px;
  }
  // .el-table__body-wrapper {
  //   z-index: 2;
  // }
  .el-table {
    .el-table__fixed {
      height: auto !important; // 此处的important表示优先于element.style
      bottom: 10px; // 改为自动高度后，设置与父容器的底部距离，则高度会动态改变
    }
  }
}
</style>
